<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="../sakura.css" />
    <title>WebUSB DFU</title>
    <script src="dfu.js"></script>
    <script src="dfuse.js"></script>
    <script src="FileSaver.js"></script>
    <script src="dfu-util.js"></script>
    <style>
      p.warning {
        color: red;
      }
      p.error {
        color: red;
        font-weight: bold;
      }
      label.radio {
        display: inline;
      }
      input:invalid {
        color:red;
      }
    </style>
  </head>
  <body>
    <a href="https://github.com/devanlai/webdfu"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
    <p>
      <span id="status"></span>
    </p>
    <p>
      <label for="vid">Vendor ID (hex):</label>
      <input list="vendor_ids" type="text" name="vid" id="vid" maxlength="6" size="8" pattern="0x[A-Fa-f0-9]{1,4}"/>
      <datalist id="vendor_ids">
        <option value="0x1209">dapboot DFU bootloader</option>
        <option value="0x0D28">mbed DAPLink</option>
        <option value="0x1EAF">LeafLabs Maple/stm32duino bootloader</option>
      </datalist>
    </p>
    <p>
      <button id="connect">Connect</button>
    </p>
    <dialog id="interfaceDialog">
      Your device has multiple DFU interfaces. Select one from the list below:
      <form id="interfaceForm" method="dialog">
        <button id="selectInterface" type="submit">Select interface</button>
      </form>
    </dialog>
    <p>
      <div id="usbInfo" style="white-space: pre"></div>
      <div id="dfuInfo" style="white-space: pre"></div>
    </p>
    <fieldset>
      <legend>Runtime mode</legend>
      <button id="detach" disabled="true">Detach DFU</button>
    </fieldset>
    <fieldset>
      <form id="configForm">
        <label for="transferSize">Transfer Size:</label>
        <input type="number" name="transferSize" id="transferSize" value="1024"/>
        <div id="dfuseFields" hidden="true">
          <label for="dfuseStartAddress">DfuSe Start Address:</label>
          <input type="text" name="dfuseStartAddress" id="dfuseStartAddress" title="Initial memory address to read/write from (hex)" size="10" pattern="0x[A-Fa-f0-9]+"/>
          <label for="dfuseUploadSize">DfuSe Upload Size:</label>
          <input type="number" name="dfuseUploadSize" id="dfuseUploadSize" min="1"/>
        </div>
      
        <legend>DFU mode</legend>
        <fieldset>
          <legend>Firmware Download (write to USB device)</legend>
          <p>
            <input type="file" id="firmwareFile" name="file" disabled="true"/>
          </p>
          <p>
            <button id="download" disabled="true">Download</button>
          </p>
          <div class="log" id="downloadLog"></div>
        </fieldset>
        <fieldset>
          <legend>Firmware Upload (read from USB device)</legend>
          <p>
            <button id="upload" disabled="true">Upload</button>
          </p>
          <div class="log" id="uploadLog"></div>
        </fieldset>
      </form>
    </fieldset>
    <h1>About</h1>
    <p>
      This is a proof-of-concept demo of host <a href="http://wiki.openmoko.org/wiki/USB_DFU">USB DFU</a> drivers in Javascript utilizing the <a href="https://wicg.github.io/webusb/">WebUSB</a> draft standard to implement USB firmware updates from the browser.
    </p>
    <h1>Prerequisites</h1>
    <p>In order to run this demo, you will need:</p>
    <ul>
      <li>
        <p>An up-to-date version of Chrome, at least version 61 or newer</p>
      </li>
      <li>
        <p>A USB DFU class device</p>
        <p>For a WebUSB friendly USB DFU bootloader that can be flashed onto <a href="http://wiki.stm32duino.com/index.php?title=Blue_Pill">inexpensive STM32F103 boards</a>, check out the <a href="https://github.com/devanlai/dapboot">dapboot</a> project.</p>
        <p>Some recent STM32 parts have on-chip USB DfuSe bootloaders that are supported by this site.</p>
      </li>
    <ul>
  </body>
</html>
